<template>
    <div class="score">
        <header class="your_score">
            <span class="score_num">{{score}}分</span>
            <div class="result_tip">{{ resultTip }}</div>
        </header>
    </div>
</template>

<script setup>
import { useQuestionStore } from '@/store/question';
import { storeToRefs } from 'pinia';
import { computed, reactive } from 'vue';

const _state = reactive({
    scoreTipsArr: [
        "输了可不好玩，所以我从来不会输",  // 100
        "敌だけど，君は気に入ったよ ",  //80
        "革命尚且成功，同志仍需努力",   //60
        "革命尚未成功，同志仍需努力",     //40
        "你治好了都流口水",  //20
        "垃圾就该扔在垃圾桶里"  //0
    ]
})
const { state } = useQuestionStore()
const score = computed(() => {
    let sum = 100
    const ans =100/(state.answerList.length) 
    if(state.answerList.length===0)return 0
    for(let i=0;i<state.answerList.length;i++){
        if(!state.questionList[i].topic_answer[state.answerList[i]].is_standard_answer){
            sum -= ans
        }
    }
    return Math.round(sum);  // 确保分数是整数
})

const resultTip = computed(() => {
    if (score.value = 100) return _state.scoreTipsArr[0];
    else if (100 > score.value >= 80) return _state.scoreTipsArr[1];
    else if (80 > score.value >= 60) return _state.scoreTipsArr[2];
    else if (60 > score.value >= 40) return _state.scoreTipsArr[3];
    else if (40 > score.value >= 20) return _state.scoreTipsArr[4];
    else return _state.scoreTipsArr[5]; 
});
</script>

<style lang="less" scoped>
.score{
    font-size: 40px;

}
</style>
<style lang="css">
body{
    background: url('@/assets/images/4-1.jpg');
}
</style>